<template>
	<view>
		<view class="nav">
			<u-tabs class="tab-style" active-color="#2979ff" :list="list" :is-scroll="false" :current="current"
				@change="change"></u-tabs>
		</view>
		<view class="w">
			<view class="choose_list">
				<view class="content">
					<!-- <navigator url="/pages/fun/specific_choose/specific_choose"> -->
					<view class="uni-list">
						<view class="uni-list-cell" hover-class="uni-list-cell-hover"
							v-for="(item, index) in librarylist" :key="index" @click="search(item.areaId)">
							<view class="library_left">
								<view class="library_name">{{ item.name }}</view>
								<text class="library_left_text">8:00 - 21:00开馆前可提前 1 小时预约</text>
							</view>

							<view class="library_name_right">
								<view class="library_name_right_text">
									<text class="can">{{ item.choose }}</text>
									/
									<text class="nocan">{{ item.num }}</text>
								</view>
								<cmd-icon type="bullet-list" size="20" color="#654321" class="other"></cmd-icon>
							</view>
							<!-- <view class="uni-list-cell-navigate uni-navigate-right">{{item}}</view> -->
						</view>
					</view>
					<!-- </navigator> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cmdIcon from '@/components/cmd-icon/cmd-icon.vue';
	import getAreaList from '@/config/api.js';
	export default {
		components: {
			cmdIcon
		},
		data() {
			return {
				navIndex: 0,
				// navState: 0, //导航状态
				librarylist: [],
				list: [],
				primaryList: [],
				current: 0
			};
		},
		watch: {
			current(val) {
				this.librarylist = this.primaryList[val].data;
				// console.log(this.librarylist);
			}
		},

		onPullDownRefresh() {
			console.log('refresh');
			this.init();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},

		methods: {
			// 这是一个跳转和传递id的方法
			search(id) {
				uni.navigateTo({
					url: '/pages/fun/confirm_seat/heatSeat/test03/test03?id=' + id
				});
			},
			change(index) {
				this.current = index.index;
			},
			init() {
				uni.$u.http
					.get('/app/seat/getAreaList')
					.then(res => {
						this.list = res.data
						this.primaryList = res.data;
						this.librarylist = this.primaryList[0].data;
					})
			},
		},
		onLoad() {
			this.init();
		},
		onPullDownRefresh() {
			this.init();
			uni.stopPullDownRefresh();
		}
	};
</script>

<style>
	.w {
		padding: 0 0 0 20px;
	}

	.choose_header {
		position: relative;
		padding-left: 20px;
		height: 50px;
		line-height: 50px;
		/* background-color: #007AFF; */
		/* box-shadow:0 2px 10px #C0C0C0; */
		margin: 15rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #cccccc;
	}

	.choose_header::before {
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';

		background-color: #c8c7cc;
	}

	.choose_header_text {
		font-size: 18px;
		color: #007aff;
	}

	.activite {
		font-size: 18px;
		color: #007aff;
	}

	.uni-list::before {
		height: 0;
	}

	.uni-list-cell {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 80px;
		padding: 10px 0 0;
	}

	.uni-list-cell-navigate {
		padding: 22upx 0;
	}

	.uni-list-cell::after {
		height: 0;
	}

	.uni-list:after {
		height: 0;
	}

	.uni-list-cell-navigate.uni-navigate-right:after {
		content: '';
	}

	.library_name {
		font-size: 18px;
		font-weight: bold;
	}

	.library_name_right {
		/* background-color: #00B26A; */
		width: 32%;
		height: 30px;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		/* align-content: space-between; */
	}

	.library_left {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.library_left_text {
		color: #9e9e9e;
		font-size: 12px;
	}

	.can {
		font-size: 20px;
		color: #007aff;
	}

	.nocan {
		color: #888888;
	}

	.other {
		margin: 10px 10px;
	}

	.nav {
		margin: 0 20px;
		height: 50px;
		flex: 1;
		/* border-bottom: 1px solid #5e6064; */
	}

	swiper {
		height: 50px;
	}

	.nav-switch-style {
		color: #00b26a;
	}

	.style-roll {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		line-height: 50px;
		border-bottom: 1px solid #00aaff;
	}

	.nav-name {
		font-size: 18px;
	}
</style>
